<template>
  <div class="dingdan">
    <div class="total-content">
      <div class="top">
        <NavTopReturn title="确认订单"></NavTopReturn>
      </div>

      <!-- 地址 -->

      <div class="dizhi">
        <div class="item" v-for="(item,index) in list" :key="index"> 
          <div class="dizi">{{item.name}} {{item.tel}}</div>
          <div class="dizi">{{item.province}}{{item.city}}{{item.county}}{{item.addressDetail}}</div>
        </div>
      </div>

      <div class="current">
        <!--  -->
        <div class="current-item" v-for="(item, index) in tota" :key="index">
          <div class="name-top">
            <div class="top-img">
              <img
                class="auto-img"
                src="https://img2.baidu.com/it/u=46579649,821546474&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
                alt=""
              />
            </div>
            <div class="top-name">360商城自营</div>
          </div>
          <div class="item-content">
            <div class="content-img">
              <img class="auto-img" :src="item.img" />
            </div>
            <div class="content-content">
              <div class="co-co-name ovf-text">{{ item.name }}</div>
              <div class="co-co-Type ovf-text">分类：{{ item.type }}</div>
              <div class="co-co-Details">
                <div class="qitian">{{ item.isqitian }}</div>
                <div class="qitian">{{ item.ishuanhuo }}</div>
                <div class="qitian">{{ item.isguanfang }}</div>
              </div>
              <div class="co-co-price">
                <div class="pirce">&yen; {{ item.currentPrice }}</div>
                <div class="price-count">x{{ item.iscount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--  -->
      <div class="midden">
        <div class="son">
          <div class="lefts">支付方式</div>
          <div class="rights">在线支付</div>
        </div>
        <div class="son">
          <div class="lefts">配送方式</div>
          <div class="rights">快递</div>
        </div>
        <div class="son">
          <div class="lefts">使用优惠卷/码</div>
          <div class="rights">暂无可用</div>
        </div>
        <div class="son">
          <div class="lefts">积分</div>
          <div class="rights">无</div>
        </div>
        <div class="son">
          <div class="lefts">发票信息</div>
          <div class="rights">不开发票</div>
        </div>
        <div class="son">
          <div class="lefts">支付方式</div>
          <div class="rights">在线支付</div>
        </div>
      </div>
      <div class="midden">
        <div class="son">
          <div class="lefts">商品总价</div>
          <div class="rights">&yen;{{ totalPrice / 100 }}</div>
        </div>
        <div class="son">
          <div class="lefts">运费</div>
          <div class="rights">&yen;0.00</div>
        </div>
        <div class="son">
          <div class="lefts">优惠卷</div>
          <div class="rights">&yen;0/00</div>
        </div>
        <div class="son">
          <div class="lefts">活动优惠</div>
          <div class="rights">&yen;50.00</div>
        </div>
        <div class="son">
          <div class="lefts">会员优惠</div>
          <div class="rights">&yen;0.00</div>
        </div>
        <div class="son">
          <div class="lefts">小计</div>
          <div class="rights">&yen;249.00</div>
        </div>
      </div>
      <div class="footer">
        <van-submit-bar
          :price="totalPrice"
          button-text="提交订单"
          @submit="clickHidden"
        />
      </div>
    </div>

  </div>
</template>

<script>
import NavTopReturn from "../components/NavTopReturn.vue";
export default {
  name: "Dingdan",
  data() {
    return {
      tota: "",
      totalPrice: 0,
      // 商品数量
      totalCount: 0,
      list: [],
    };
  },
  components: {
    NavTopReturn,
  },

  computed:{

  },
  created() {
    //订单商品数据
    this.ProductData();
    //调用地址
    this.getaddressFunct();

    // 

  },

  methods: {
    //地址
    getaddressFunct() {
      let bendiaddressData = JSON.parse(localStorage.getItem("addressData"));
      // console.log("bendiaddressData=====>",bendiaddressData);
      //判断是否为空，为空就停止
      if(bendiaddressData == null){
        this.$toast("你还没有地址，请添加地址")
        this.$router.push({name:"AppShipToAnd"})
      }else{

        bendiaddressData.forEach((item) => {
          if (item.isDefault) {
            this.list = [item];
          }
        }); 
        console.log("list=?", this.list);
      }
      },
    
    //提交订单跳转结算页面
    clickHidden() {
      //获取本地购物车数组
      let bendiData = JSON.parse(localStorage.getItem("appCount"));
      //获取点击高亮，跳转提交订单得数据
      let currentSuccessData = JSON.parse(localStorage.getItem("successData"));

      if (!currentSuccessData) {
        currentSuccessData = [];
      } else {
        currentSuccessData;
      }

      // console.log("bendiData=>", bendiData);
      // console.log("currentSuccessData=>", currentSuccessData);
      // //添加待付款去重
      // for (let i = 0; i < bendiData.length; i++) {
      //   for (let j = 0; j < currentSuccessData.length; j++) {
      //     if (bendiData[i].countID == currentSuccessData[j].countID) {
      //       bendiData.splice(j, 1);
      //     }
      //   }
      // }

      // 去掉购物车数组待支付得对象
      // 去掉待支付得订单数据
      for (let i = 0; i < bendiData.length; i++) {
        for (let j = 0; j < this.tota.length; j++) {
          if (bendiData[i].countID == this.tota[j].countID) {
            bendiData.splice(j, 1);
          }
        }
      }



      // console.log("订单bendiData=》》》", bendiData);
      // 购物车订单从新渲染
      localStorage.setItem("appCount", JSON.stringify(bendiData));
      // 给一个未支付得状态
      this.tota.forEach((item) => {
        item.isdingdan += item.currentPrice * item.iscount;
      });
      // console.log("aaa=======>", this.tota);
      // 添加本地待支付
      //添加一个空数组
      // let currentSuccessData = []
      let kindek = []
      kindek.push({  
        type :1,
        currentTiem: new Date().getTime()

      })
      kindek[0].daizhifu = [],

      this.tota.forEach((item) => {
        kindek[0].daizhifu.push(item);
      });
      currentSuccessData.push(kindek[0]);
      window.localStorage.setItem("successData", JSON.stringify(currentSuccessData));

      //跳转结算页面
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
      })

      //在拿订单号时间戳
      console.log("kindek=>",kindek[0].currentTiem);
      setTimeout(() => {
        
        this.$router.push({ name: "JieSuan",params:{orderData:this.tota,orderID:kindek[0].currentTiem}});
      }, 1000);
     
    },

    //订单商品数据
    ProductData() {
      // 拿到订单结算数据
      let bendiData = JSON.parse(localStorage.getItem("DingDanChebox"));
      this.tota = bendiData;
      console.log("bendiData======----=>", this.tota);
      let aa = 0;
      if(this.tota){

        this.tota.forEach((item) => {
          aa += Number(item.iscount * item.currentPrice);
        });
        this.totalPrice = aa * 100;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dizi{
  font-size: 16px;
  padding: 5px 10px;
}
.van-address-list {
  padding: 0;
}
.item-content {
  display: flex;
  .content-content {
    margin-left: 10px;
    height: 100px;
    width: 230px;
    box-sizing: border-box;
    .co-co-price {
      display: flex;
      padding: 10px 0 0 0;
      .price-count {
        margin-left: auto;
        color: #999;
      }
      .pirce {
        font-size: 16px;
        color: #ff3338;
        font-weight: bold;
      }
    }
    .co-co-Details {
      display: flex;
      width: 230px;
      font-size: 12px;
      .qitian {
        background: #f9c2c2;
        color: #ff3338;
        margin-right: 5px;
        padding: 2px 5px;
        border-radius: 5px;
        box-sizing: border-box;
      }
    }
    .co-co-Type {
      font-size: 14px;
      color: #999;
      width: 230px;

      padding: 5px 0;
      box-sizing: border-box;
    }
    .co-co-name {
      font-size: 16px;
      width: 100%;
      font-weight: bold;
    }
  }
  .content-img {
    width: 100px;
    height: 100px;
    border: 1px solid rgb(211, 211, 211);
  }
}
.current-item {
  width: 96%;
  margin: 5px auto;
  background-color: white;
  border-radius: 5px;
  border: 1px solid rgb(208, 208, 208);

  .name-top {
    padding: 5px 10px;
    display: flex;
    .top-name {
      font-size: 16px;
      font-weight: bold;
      margin-left: 10px;
    }
    .top-img {
      width: 20px;
      height: 20px;
    }
  }
}

.son {
  display: flex;
  padding: 10px;
  font-size: 16px;
  border-bottom: 1px solid rgb(235, 234, 234);

  .lefts {
    font-weight: bold;
  }
  .rights {
    margin-left: auto;
    color: #999;
  }
}
.midden {
  width: 96%;
  border: 1px solid #dedede;
  background-color: #ffffff;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}
.item-content {
  font-size: 16px;
  padding: 5px 10px;
}
.item-top,
.item-footer {
  font-size: 12px;
  padding: 5px;
}
.item {
  width: 96%;
  background-color: white;
  margin: 10px auto;
  border-radius: 5px;
  border: 1px solid rgb(220, 217, 217);
}
.dingdan {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #f5f5f5;
}
</style>